<template>
  <q-page class="q-pa-md">
    <div class="q-pb-md text-h5">
      {{ pageTitle }}
      <span class="text-subtitle1">{{ pageSubTitle }}</span>
    </div>
    <div class="q-pa-sm shadow-2 q-mb-md">
      <div class="q-gutter-sm">
        <q-btn @click="detailNav.goBackToList" color="primary" icon="arrow_back" outline title="返回" />
        <q-btn :disable="loadingState" :loading="loadingState" @click="loadModelData" color="primary" dense
          icon="refresh" outline title="刷新" />
      </div>
    </div>
    <div class="shadow-2 q-mt-md">
      <q-tabs active-color="primary" align="left" dense indicator-color="primary" v-model="showingTabPanel">
        <q-tab :label="'保税转仓' + pageSubTitle" name="bondedTransfer" />
        <q-tab label="保税转仓明细" name="bondedTransferLineList" />
        <q-tab :label="ldsLine.tabTitle.value" name="bondedTransferLineDetail" v-if="ldsLine.isLineTabDisp.value" />
      </q-tabs>
      <q-separator />
      <q-tab-panels :keep-alive-include="['bondedTransfer','bondedTransferLineList']" keep-alive v-model="showingTabPanel">
        <q-tab-panel class="q-pa-sm" name="bondedTransfer">
          <form-field-group :model-with-create-update="$d.form" model-id="btId" title="主要信息">
            <div class="q-pa-sm">
              <div class="row q-col-gutter-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>转仓合同号</span>
                  <easy-input :model-value="$d.form.bondedTransferNo" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>是否成功</span>
                  <easy-input :model-value="$d.form.isSuccess?'是':'否'" readonly/>
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>生成的保税出库单序号</span>
                  <easy-input :model-value="$d.form.bfsOrderId" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>生成的保税入库单序号</span>
                  <easy-input :model-value="$d.form.bfsAsnId" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>生成的仓库出库单序号</span>
                  <easy-input :model-value="$d.form.wmsOrderId" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>生成的仓库入库单序号</span>
                  <easy-input :model-value="$d.form.wmsAsnId" readonly/>
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>From保税仓Code</span>
                  <easy-input :model-value="$d.form.fromWmsCode" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>To保税仓Code</span>
                  <easy-input :model-value="$d.form.toWmsCode" readonly/>
                </div>
                <div class="col-12">
                  <span>错误信息</span>
                  <easy-input :model-value="$d.form.backMsg" readonly type="textarea" :rows="3"/>
                </div>
                <div class="col-12">
                  <span>原始请求数据</span>
                  <easy-input :model-value="$d.form.rawData" readonly type="textarea" :rows="6"/>
                </div>
              </div>
            </div>
          </form-field-group>
        </q-tab-panel>
        <q-tab-panel class="q-pa-none" name="bondedTransferLineList">
          <div class="row q-col-gutter-sm items-center q-pa-sm">
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
              <div class="col-4 text-right searchbar-label">备案序号</div>
              <div class="col-8">
                <easy-input v-model="lineFpsReq.recordNumber" :readonly="lineListDataLoadingState" @focus="fx.ui.select"
                  @keyup.enter="loadLineListData(2)" />
              </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
              <div class="col-4 text-right searchbar-label">商品料号</div>
              <div class="col-8">
                <easy-input v-model="lineFpsReq.commodityNumber" :readonly="lineListDataLoadingState" @focus="fx.ui.select"
                  @keyup.enter="loadLineListData(2)" />
              </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
              <div class="col-4 text-right searchbar-label">商品编码</div>
              <div class="col-8">
                <easy-input v-model="lineFpsReq.commodityCode" :readonly="lineListDataLoadingState" @focus="fx.ui.select"
                  @keyup.enter="loadLineListData(2)" />
              </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
              <div class="col-4 text-right searchbar-label">商品名称</div>
              <div class="col-8">
                <easy-input v-model="lineFpsReq.tradeNameLabelCn" :readonly="lineListDataLoadingState" @focus="fx.ui.select"
                  @keyup.enter="loadLineListData(2)" />
              </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
              <div>
                <q-btn color="primary" icon="search" label="查询" @click="loadLineListData" class="col-auto" />
              </div>
            </div>
          </div>
          <q-separator />
          <q-table :columns="fpsInfo.columnsInfo" :rows="$d.lineTableData" :loading="lineListDataLoadingState"
            :visible-columns="fpsInfo.visibleColumns" v-model:pagination="fpsInfo.paginationInfo"
            @row-dblclick="(evt,row)=>{ldhLine.lineDetailNav.goViewLine(row.lineId)}" color="primary" dense flat
            row-key="lineId" separator="cell">
            <template v-slot:top="props">
              <q-space />
              <table-col-options-cfg v-model:visible-columns="fpsInfo.visibleColumns"
                v-model:table-columns="fpsInfo.columnsInfo" class="q-mx-sm"
                @update-col-options-for-save="fpsAssist.saveColOptions"></table-col-options-cfg>
              <q-btn :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="props.toggleFullscreen"
                class="q-ml-sm" dense flat />
            </template>
            <template v-slot:body-cell-operation="props">
              <q-td :props="props" auto-width>
                <q-btn dense :disable="loadingState" @click="ldhLine.lineDetailNav.goViewLine(props.row.lineId)"
                  color="primary" label="查看" class="btn-in-row q-mr-xs" />
              </q-td>
            </template>
            <template v-slot:no-data>
              <div class="full-width text-center">
                <q-icon name="error_outline" />
                无数据
              </div>
            </template>
            <!--客户端分页-->
            <template v-slot:bottom>
              <paging-bar :loading-state="lineListDataLoadingState" :pageNo="lineFpsReq.pageNo" :pageSize="lineFpsReq.pageSize"
                :totalAmount="fpsInfo.totalAmount" @pagesize-changed="fpsAssist.onPageSizeChanged"
                @go-to-page="fpsNav.gotoPage" />
            </template>
          </q-table>
        </q-tab-panel>
        <q-tab-panel class="q-pa-sm" name="bondedTransferLineDetail">
          <div class="q-gutter-sm">
            <q-btn @click="ldhLine.lineDetailNav.backToListTab" color="primary" icon="close" outline title="关闭"
              v-if="ldsLine.isLineViewMode.value" />
            <q-btn :disable="lineLoadingState" :loading="lineLoadingState"
              @click="loadLineModelData" color="primary" dense
              icon="refresh" outline title="刷新" v-if="ldsLine.isLineViewOrEditMode.value" />
          </div>
          <form-field-group class="q-mt-sm" :model-with-create-update="ldhLine.lineDetailInfo.lineForm"
            model-id="lineId" title="主要信息">
            <div class="q-pa-sm">
              <div class="row q-col-gutter-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>清单编号</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.listingNumber" readonly />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>进境报关单号</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.entryRecord" readonly />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>商品序号</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.number" readonly />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>备案序号</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.recordNumber" readonly />
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>Bill of lading</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.billOfLading" readonly />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>PDS Item Code</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.pdsItemCode" readonly />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>商品料号</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.commodityNumber" readonly />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>商品编码</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.commodityCode" readonly />
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>商品名称</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.tradeNameLabelCn" readonly />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>规格型号</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.specificationType" readonly />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>原产国（地区）</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.countryOfOrigin" readonly />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>最终目的国（地区）</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.countryOfDestination" readonly />
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>申报单价</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.declaredUnitPrice" readonly />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>申报总价</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.declaredTotalPrice" readonly />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>币别</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.currency" readonly />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>申报数量</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.declaredQuantity" readonly />
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>申报单位</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.declarationUnit" readonly />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>法定单位</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.statutoryUnit" readonly />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>法定数量</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.legalQuantity" readonly />
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>法二单位</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.statutorySecondUnit" readonly />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>法二数量</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.quantitativeSecondQuantity" readonly />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>征免方式</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.exemptingMethod" readonly />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>版本号</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.versionNumber" readonly />
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>From保税仓Code</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.fromWmsCode" readonly />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>To保税仓Code</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.toWmsCode" readonly />
                </div>
              </div>
            </div>
          </form-field-group>
        </q-tab-panel>
      </q-tab-panels>
    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'BondedTransfer'
}
</script>

<script lang="ts" setup>

import {useTitleHelper} from '@njt/foundation/hooks/titleHelper'
import {useDetailHelper} from '@njt/foundation/hooks/detailHelper'
import {reactive, ref} from 'vue'
import {
  BondedTransferInfo, BondedTransferLine,
  GetBondedTransferLineListReq,
  GetBondedTransferLineListResp
} from 'src/defs/ims/bondedTransfer'
import {ColumnInfo} from '@njt/foundation/defs/comm'
import {useLineDetailHelper} from '@njt/foundation/hooks/lineDetailHelper'
import {useFpsHelper} from '@njt/foundation/hooks/fpsHelper'

const pageTitle = '保税转仓'
useTitleHelper(pageTitle)
let loadingState = ref(false)
let showingTabPanel = ref('bondedTransfer')

const $d = reactive({
  form: {} as BondedTransferInfo,
  lineTableData: [] as BondedTransferLine[],
})

const loadModelData = function () {
  loadingState.value = true
  $f.axios
    .get<BondedTransferInfo>('/mhlbc/ims/get-bonded-transfer-by-id/' + detailInfo.itemId)
    .then((resp) => {
      $d.form = resp.data
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      loadingState.value = false
    })
}

const {
  detailInfo,
  detailStatus,
  detailNav
}  = useDetailHelper('/ims/bonded-transfer',
  $d.form,
  null,
  '/ims/bonded-transfer',
  '/ims/bonded-transfer/detail',
  null,
  null,
  loadModelData,
  null
)
const {
  pageSubTitle
} = detailStatus

let lineFpsReq: GetBondedTransferLineListReq = reactive({
  btId: Number(detailInfo.itemId),
  recordNumber: null,
  commodityNumber: null,
  commodityCode: null,
  tradeNameLabelCn: null,
  pageNo: 1,
  pageSize: 40,
  isDescending: false,
  orderBy: null
})
let lineListDataLoadingState = ref(false)

let columnsInfoLine: ColumnInfo[] = [
  {
    label: '操作',
    name: 'operation',
    field: 'operation',
    align: 'left',
    defOrder: 1,
    sortable: false,
    defVisible: true
  },
  {
    label: '序号',
    name: 'lineId',
    field: 'lineId',
    align: 'left',
    defOrder: 2,
    sortable: false,
    defVisible: true
  },
  {
    label: '清单编号',
    name: 'listingNumber',
    field: 'listingNumber',
    align: 'left',
    defOrder: 3,
    sortable: false,
    defVisible: true
  },
  {
    label: '进境报关单号',
    name: 'entryRecord',
    field: 'entryRecord',
    align: 'left',
    defOrder: 4,
    sortable: false,
    defVisible: true
  },
  {
    label: '商品序号',
    name: 'number',
    field: 'number',
    align: 'left',
    defOrder: 5,
    sortable: false,
    defVisible: true
  },
  {
    label: '备案序号',
    name: 'recordNumber',
    field: 'recordNumber',
    align: 'left',
    defOrder: 6,
    sortable: false,
    defVisible: true
  },
  {
    label: 'Bill of lading',
    name: 'billOfLading',
    field: 'billOfLading',
    align: 'left',
    defOrder: 7,
    sortable: false,
    defVisible: true
  },
  {
    label: 'PDS Item Code',
    name: 'pdsItemCode',
    field: 'pdsItemCode',
    align: 'left',
    defOrder: 8,
    sortable: false,
    defVisible: true
  },
  {
    label: '商品料号',
    name: 'commodityNumber',
    field: 'commodityNumber',
    align: 'left',
    defOrder: 9,
    sortable: false,
    defVisible: true
  },
  {
    label: '商品编码',
    name: 'commodityCode',
    field: 'commodityCode',
    align: 'left',
    defOrder: 10,
    sortable: false,
    defVisible: true
  },
  {
    label: '商品名称',
    name: 'tradeNameLabelCn',
    field: 'tradeNameLabelCn',
    align: 'left',
    defOrder: 11,
    sortable: false,
    defVisible: true
  },
  {
    label: '规格型号',
    name: 'specificationType',
    field: 'specificationType',
    align: 'left',
    defOrder: 12,
    sortable: false,
    defVisible: true
  },
  {
    label: '原产国（地区）',
    name: 'countryOfOrigin',
    field: 'countryOfOrigin',
    align: 'left',
    defOrder: 13,
    sortable: false,
    defVisible: true
  },
  {
    label: '最终目的国（地区）',
    name: 'countryOfDestination',
    field: 'countryOfDestination',
    align: 'left',
    defOrder: 14,
    sortable: false,
    defVisible: true
  },
  {
    label: '申报单价',
    name: 'declaredUnitPrice',
    field: 'declaredUnitPrice',
    align: 'left',
    defOrder: 15,
    sortable: false,
    defVisible: true
  },
  {
    label: '申报总价',
    name: 'declaredTotalPrice',
    field: 'declaredTotalPrice',
    align: 'left',
    defOrder: 16,
    sortable: false,
    defVisible: true
  },
  {
    label: '币别',
    name: 'currency',
    field: 'currency',
    align: 'left',
    defOrder: 17,
    sortable: false,
    defVisible: true
  },
  {
    label: '申报数量',
    name: 'declaredQuantity',
    field: 'declaredQuantity',
    align: 'left',
    defOrder: 18,
    sortable: false,
    defVisible: true
  },
  {
    label: '申报单位',
    name: 'declarationUnit',
    field: 'declarationUnit',
    align: 'left',
    defOrder: 19,
    sortable: false,
    defVisible: true
  },
  {
    label: '法定单位',
    name: 'statutoryUnit',
    field: 'statutoryUnit',
    align: 'left',
    defOrder: 20,
    sortable: false,
    defVisible: true
  },
  {
    label: '法定数量',
    name: 'legalQuantity',
    field: 'legalQuantity',
    align: 'left',
    defOrder: 21,
    sortable: false,
    defVisible: true
  },
  {
    label: '法二单位',
    name: 'statutorySecondUnit',
    field: 'statutorySecondUnit',
    align: 'left',
    defOrder: 22,
    sortable: false,
    defVisible: true
  },
  {
    label: '法二数量',
    name: 'quantitativeSecondQuantity',
    field: 'quantitativeSecondQuantity',
    align: 'left',
    defOrder: 23,
    sortable: false,
    defVisible: true
  },
  {
    label: '征免方式',
    name: 'exemptingMethod',
    field: 'exemptingMethod',
    align: 'left',
    defOrder: 24,
    sortable: false,
    defVisible: true
  },
  {
    label: '单耗版本号',
    name: 'versionNumber',
    field: 'versionNumber',
    align: 'left',
    defOrder: 25,
    sortable: false,
    defVisible: true
  },
  {
    label: 'From 保税仓Code',
    name: 'fromWmsCode',
    field: 'fromWmsCode',
    align: 'left',
    defOrder: 26,
    sortable: false,
    defVisible: true
  },
  {
    label: 'To 保税仓Code',
    name: 'toWmsCode',
    field: 'toWmsCode',
    align: 'left',
    defOrder: 27,
    sortable: false,
    defVisible: true
  },
  {
    label: '创建时间',
    name: 'createDt',
    field: 'createDt',
    align: 'left',
    defOrder: 100,
    sortable: false,
    defVisible: true,
    format: (val: string) => $f.fmt.dtFmtFullNoSec(val)
  },
  {
    label: '创建人',
    name: 'createP',
    field: 'createP',
    align: 'left',
    defOrder: 101,
    sortable: false,
    defVisible: true,
    format: (val: string, row: BondedTransferLine) => $f.fmt.userDisp(val, row.createPn)
  },
  {
    label: '更新时间',
    name: 'updateDt',
    field: 'updateDt',
    align: 'left',
    defOrder: 102,
    sortable: false,
    defVisible: true,
    format: (val: string) => $f.fmt.dtFmtFullNoSec(val)
  },
  {
    label: '更新人',
    name: 'updateP',
    field: 'updateP',
    align: 'left',
    defOrder: 103,
    sortable: false,
    defVisible: true,
    format: (val: string, row: BondedTransferLine) => $f.fmt.userDisp(val, row.updatePn)
  },

]

const loadLineListData = function (resetFpsReq?: number) {
  if (resetFpsReq) {
    if (resetFpsReq >= 1) {
      lineFpsReq.pageNo = 1
    }
    if (resetFpsReq >= 2) {
      lineFpsReq.orderBy = ''
      lineFpsReq.isDescending = false
    }
  }
  lineListDataLoadingState.value = true
  $f.axios
    .get<GetBondedTransferLineListResp>('/mhlbc/ims/get-bonded-transfer-line-list', {params: lineFpsReq})
    .then((resp) => {
      fpsAssist.handleGenericFpsResp(resp.data)
      $d.lineTableData = resp.data.bondedTransferLines
      fpsAssist.saveFpsReq(lineFpsReq)
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      lineListDataLoadingState.value = false
    })
}

const {
  fpsInfo,
  fpsAssist,
  fpsNav
} = useFpsHelper('/ims/declaration_line',
  null,
  null,
  null,
  lineFpsReq, columnsInfoLine,
  null,
  loadLineListData)

let lineLoadingState = ref(false)
const loadLineModelData = function () {
  lineLoadingState.value = true
  $f.axios
    .get<BondedTransferLine>('/mhlbc/ims/get-bonded-transfer-line-by-id/' + String(ldhLine.lineDetailInfo.lineItemId))
    .then((resp) => {
      ldhLine.lineDetailInfo.lineForm = resp.data
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      lineLoadingState.value = false
    })
}

const ldhLine = useLineDetailHelper(
  '保税转仓明细',
  'bondedTransferLineList',
  'bondedTransferLineDetail',
  {},
  loadLineModelData,
  showingTabPanel,
  null,
  () => {
    // ignore
  },
)

const ldsLine = ldhLine.lineDetailStatus

const fx = $f
</script>

<style scoped>

</style>